<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="outpatient_service">
      <div class="outpatient_service_title">
        <h1>{{ itemtext }}</h1>
      </div>
      <ul class="clinic">
        <li v-for="(item, index) in tiemList" :key="index" @click="clinicAction(index)"
          :class="{ active: value == index }">
          <span>{{ item.week }}</span>
          <span>{{ item.date }}</span>
          <span>{{ item.current }}</span>
        </li>
      </ul>
      <p class="prompt">
        <img src="https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E5%8F%B7%E6%BA%90/u356.png" alt="" />
        <span>该科室仅允许14岁及以上患者挂号</span>
      </p>
      <div class="outpatient_doctor">
        <nav v-for="(item, index) in doctorinfo" :key="item.id">
          <div class="doctor_list">
            <div class="doctor_left">
              <img :src="item.img" alt="" />
            </div>
            <div class="doctor_right">
              <span class="doctor_name">{{ item.name }}</span>
              <span class="doctor_position">{{ item.catename }}</span>
              <p class="doctor_excel">{{ item.context }}</p>
            </div>
          </div>
          <p class="morning">
            <span ref="str1">{{ day[0] }}-{{ day.split("").splice(2).join("") }}</span>
            <span ref="str2">({{ weekday }})</span>
            <span ref="str3">上午</span>
            <span class="state">{{ item.price }}</span>
            <span class="number" @click="NumberAction(index, item.price)" :id="item._id" ref="sum" :num="item.num">剩余{{
              item.num }}</span>
          </p>
          <p class="afternoon">
            <span>{{ day[0] }}-{{ day.split("").splice(2).join("") }}</span>
            <span>({{ weekday }})</span>
            <span>下午</span>
            <span class="state">约满</span>
          </p>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { mapState } from "vuex";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      tiemList: [
        {
          week: "今日",
          date: "3/15",
          current: "有号",
        },
        {
          week: "周二",
          date: "3/16",
          current: "有号",
        },
        {
          week: "周三",
          date: "3/17",
          current: "有号",
        },
        {
          week: "周四",
          date: "3/18",
          current: "有号",
        },
        {
          week: "周五",
          date: "3/19",
          current: "有号",
        },
        {
          week: "周六",
          date: "3/20",
          current: "有号",
        },
        {
          week: "周日",
          date: "3/21",
          current: "有号",
        },
      ],
      value: 0,
      day: "",
      itemtext: "",
      weekday: "",
    };
  },
  created() {
    console.log(this.$route.params.item);
    this.itemtext = this.$route.params.item;
    this.$store.dispatch("doctor/getdoctorinfo");
  },
  computed: {
    ...mapState("doctor", ["doctorinfo"]),
  },
  methods: {
    clinicAction(index) {
      this.value = index;
    },
    NumberAction(index, price) {
      let id = this.$refs.sum[index].getAttribute("id");
      let num = this.$refs.sum[index].getAttribute("num");
      console.log('医生的id', id);
      this.$store.commit("doctor/doctorreduce", id);
      this.$store.commit("doctor/doctornum", num);
      let str = `${this.$refs.str1[index].innerHTML} ${this.$refs.str2[index].innerHTML} ${this.$refs.str3[index].innerHTML}`;
      // console.log("价格：", price);
      this.$store.commit("doctor/registrationPrice", price);
      this.$store.commit("doctor/setday", str);
      this.$router.push({
        name: "SelectTimePeriod",
        params: { text: "选择时段", id, itemtext: this.itemtext },
      });
    },
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this.day = this.tiemList[this.value].date;
        this.weekday = this.tiemList[this.value].week;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

.outpatient_service {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  //标题
  .outpatient_service_title {
    background-color: #fff;

    h1 {
      padding-top: vw(26);
      padding-bottom: vw(26);
      padding-left: vw(16);
      box-sizing: border-box;
      font-family: "MicrosoftYaHei", "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(16);
      color: #333333;
    }
  }

  //时间
  .clinic {
    height: vw(66);
    background-color: #fff;
    border-top: 1px solid rgba(242, 242, 242, 1);
    border-bottom: 1px solid rgba(242, 242, 242, 1);
    display: flex;
    overflow: auto;
    width: 100%;

    &::-webkit-scrollbar {
      display: none;
    }

    li {
      flex-shrink: 0;
      display: flex;
      border-right: 1px solid rgba(242, 242, 242, 1);
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      height: 100%;
      width: vw(59);
      cursor: pointer;

      span {
        font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: vw(12);
        color: #000000;
      }
    }

    .active {
      background-color: #2ec7c9;

      span {
        color: #fff;
      }
    }
  }

  //提示
  .prompt {
    padding-left: vw(16);
    padding-top: vw(15);
    padding-bottom: vw(15);
    box-sizing: border-box;

    img {
      width: vw(15);
      height: vw(15);
      float: left;
      padding-right: vw(10);
    }

    span {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      color: #333333;
    }
  }

  //门诊医生列表
  .outpatient_doctor {
    nav {
      background-color: #fff;
      margin-bottom: vw(10);
      border-top: 1px solid rgba(242, 242, 242, 1);
      border-bottom: 1px solid rgba(242, 242, 242, 1);

      // 医生列表
      .doctor_list {
        padding-left: vw(16);
        padding-top: vw(25);
        padding-bottom: vw(20);
        display: flex;

        .doctor_left {
          width: vw(50);
          height: vw(50);
          border-radius: 50%;
          background-color: rgba(242, 242, 242, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: vw(10);
        }

        .doctor_right {
          .doctor_name {
            color: #333333;
            font-family: "微软雅黑 Bold", "微软雅黑";
            font-weight: 700;
            font-style: normal;
            font-size: vw(14);
            margin-right: vw(10);
          }

          .doctor_position {
            font-family: "MicrosoftYaHei", "微软雅黑";
            font-weight: 400;
            font-style: normal;
            color: #999999;
            font-size: vw(14);
            border-left: 1px solid rgba(242, 242, 242, 1);
            padding-left: vw(10);
          }

          .doctor_excel {
            padding-top: vw(15);
            width: vw(250);
            font-family: "MicrosoftYaHei", "微软雅黑";
            font-weight: 400;
            font-style: normal;
            font-size: vw(12);
            color: #999999;
          }
        }
      }

      // 上午，下午
      .morning,
      .afternoon {
        position: relative;
        padding-top: vw(10);
        padding-bottom: vw(10);
        padding-left: vw(16);

        span {
          font-family: "ArialMT", "Arial";
          font-weight: 400;
          font-style: normal;
          font-size: vw(14);
          margin-right: vw(8);
        }

        .state {
          position: absolute;
          top: vw(12);
          left: vw(230);
        }
      }

      .morning {
        span {
          color: #2ec7c9;
        }

        .state {
          color: #ec5c28;
        }

        .number {
          position: absolute;
          top: vw(8);
          right: vw(15);
          padding: vw(4);
          border-radius: vw(4);
          background-color: #2ec7c9;
          color: #fff;
          cursor: pointer;
        }
      }

      .afternoon {
        border-top: 1px solid rgba(242, 242, 242, 1);

        span {
          color: #999;
        }
      }
    }
  }
}
</style>
